<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客系统登录</title>
    <link rel="stylesheet" type="text/css" href="css/change.css" />
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/common.css">
     <script src="js/change.js"></script>
</head>
<body>
<div class="nav">
    <img src="pic/bokelogo.jpg" alt="">
    <span class="blog-title">今日小博</span>
    <div class="space"></div>
    <a class="nav-span" href="blog_list.html">主页</a>
    <a class="nav-span" href="blog_edit.html">写博客</a>
</div>
<div class="control">
    <div class="item">
        <div class="active">登录</div><div>注册</div>
    </div>
    <div class="content">
        <div style="display: block;">
            <p>账号</p >
            <input type="text" placeholder="username" name="username" id="username"/>
            <p>密码</p >
            <input type="password" placeholder="password" name="password" id="password"/>
            <br/>
            <p>验证码</p>
            <input id="identify-input" type="text" name="identify-input" style="width: 60px;height: 30px;">
            <img id="identify-img" src="/user/identifyImage" style="cursor: pointer;" title="看不清？换一张">
            <br>
            <br>
            <button id="submit" onclick="login()">提交</button>
        </div>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
    function login()
    {
        $.ajax({
            type:"post",
            url:"user/login",
            data:{
                username:$("#username").val(),
                password: $("#password").val(),
                identifyCode:$("#identify-input").val()

            },
            success:function(result)
            {
                if(result.code==200 && result.data!=null)
                {
                    //说明登录成功
                    localStorage.setItem("user_token",result.data);
                    location.href="blog_list.html";
                }
                else
                {
                    alert(result.errorMsg);
                }
            }
        });
    }
</script>
<!--绑定点击事件 -->
<script>
    $("#identify-img").on('click',function (){
        // 点击验证码那个图片的时候，我们输入的验证码那个框就会清空
        $('#identify-input').val('')
        //而且我们点击验证码的时候，希望它可以改变验证码内容，其实是通过发送新请求来改变验证码内容
        $('#identify-img').attr('src','/user/identifyImage?'+Math.random()+new Date().getTime())
    })

</script>
</body>
</html>
